import React, { useState, FC } from "react";
import { Item } from "../utils/types";
import { useLocation } from "react-router-dom";
import "./Detail.css";
import { BackTop } from "antd";
import { Badge } from "antd";
import { Space } from "antd";
import { HeartOutlined ,WechatOutlined,AppstoreAddOutlined

} from "@ant-design/icons";

interface IAppProps extends Item {}

const App: FC<IAppProps> = () => {
  const location = useLocation();
  const [item] = useState((location.state as any).item);
  
  return (
    <div className="main">
      <div className="main_1">
        <Badge count={5}>
          <Space className="icon">
            <HeartOutlined />
          </Space>
        </Badge>
        <Badge count={0}>
          <Space className="icon">
          <WechatOutlined />
          </Space>
        </Badge>
        <Badge count={0}>
          <Space className="icon">
          <AppstoreAddOutlined />
          </Space>
        </Badge>
      </div>
      <div className="header">
        <BackTop />
        <p>{item.title}</p>
        <div className="img">
          <img src={item.cover} alt="" />
        </div>
        <div dangerouslySetInnerHTML={{ __html: item.html } as any}></div>
      </div>
      {/* <div className="footer">
        {data.map((item: Item, index: number) => {
          return <div key={index} onClick={()=>{
            navigate(`/detail/${item.id}`,{
              state:{
                item
              }
            })
            
          }}
          >{item.title}</div>;
        })}
      </div> */}
    </div>
  );
};

export default App;
